/*
 * @Author: mikey.zhaopeng 
 * @Date: 2018-05-19 11:23:05 
 * @Last Modified by: wangguanqing
 * @Last Modified time: 2018-06-08 10:41:46
 */
<template>
  	<div>
  		<el-row class="bigTitleCon" style="background: #262544;padding:1em 1em;">
	  		<el-col :xs="24" :sm="24" :md="24" :lg="24" style="text-align: left;">
	  			<b style="color: white;margin-left: 1em;">区域：</b>
	  			<el-radio-group @change="changeArea" text-color="white" v-model="data.areaId" style="border: 1px solid #1776fd;margin: 5px;border-radius: 6px;">
	  				<el-radio-button label="">全部区域</el-radio-button>
	  				<el-radio-button
	  					v-for="item in AllAreaData"
        				:key="item.id"
        				:label="item.id">{{item.name}}
	  				</el-radio-button>
	  			</el-radio-group>
	  		</el-col>
	  	</el-row>
	  	<el-row class="bigTitleCon" style="background: #262544;padding:1em 1em;">
	  		<el-col :xs="24" :sm="24" :md="24" :lg="24" style="text-align: left;">
	  			<b style="color: white;margin-left: 1em;">门店：</b>
	  			<el-radio-group @change="changeShop" text-color="white" v-model="data.shopId" style="border: 1px solid #1776fd;margin: 5px;border-radius: 6px;">
	  				<el-radio-button
	  					v-for="item in AllStoreByAreaData"
        				:key="item.id"
        				:label="item.id">{{item.name}}
	  				</el-radio-button>
	  			</el-radio-group>
	  			<button class="myButton" @click="showBtn" v-if="isShow">更多<i class="myButton-downIcon"></i></button>
	  			<button class="myButton" @click="hideBtn" v-if="isHide">收起<i class="myButton-topIcon"></i></button>
	  		</el-col>
	  	</el-row>
  	</div>
</template>
<script>
import {
  GetAllArea, // 获取所有区域
  GetAllStoreByAreaId // 获取所有门店
} from "@/api/flh/home";
export default {
  props: {},
  computed: {},
  data() {
    return {
      AllAreaData: [], // 所有区域数据
      AllStoreByAreaDataArr: [], // 所有门店数据
      AllStoreByAreaData: [], // 前五条门店数据
      data: {
        areaId: "", // 所选区域数据
        shopId: "" // 所选门店数据
      }, // 参数
      isShow: false, // 是否显示查看更多
      isHide: false // 是否显示查看更多
    };
  },
  mounted() {
    this.fetchGetAllArea();
    this.fetchGetAllStoreByAreaId();
  },
  watch: {},
  methods: {
    // 获取所有区域
    async fetchGetAllArea() {
      try {
        var res = await GetAllArea();
        if (res.data.code === "0") {
          //              console.log(res.data.result)
          this.$set(this, "AllAreaData", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 获取所有门店
    async fetchGetAllStoreByAreaId() {
      var params = {
        areaId: this.data.areaId
      };
      try {
        var res = await GetAllStoreByAreaId(params);
        if (res.data.code === "0") {
          //              console.log(res.data.result)
          this.$set(this, "AllStoreByAreaDataArr", res.data.result);
          if (res.data.result.length > 6) {
            this.$set(
              this,
              "AllStoreByAreaData",
              JSON.parse(JSON.stringify(this.AllStoreByAreaDataArr.slice(0, 5)))
            );
            this.$set(this, "isShow", true);
            this.$set(this, "isHide", false);
          } else {
            this.$set(
              this,
              "AllStoreByAreaData",
              JSON.parse(JSON.stringify(this.AllStoreByAreaDataArr))
            );
            this.$set(this, "isShow", false);
            this.$set(this, "isHide", false);
          }
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 查看全部点击事件
    showBtn() {
      this.$set(
        this,
        "AllStoreByAreaData",
        JSON.parse(JSON.stringify(this.AllStoreByAreaDataArr))
      );
      this.$set(this, "isShow", false);
      this.$set(this, "isHide", true);
    },
    // 隐藏点击事件
    hideBtn() {
      this.$set(
        this,
        "AllStoreByAreaData",
        JSON.parse(JSON.stringify(this.AllStoreByAreaDataArr.slice(0, 5)))
      );
      this.$set(this, "isShow", true);
      this.$set(this, "isHide", false);
    },
    // 改变区域触发事件
    changeArea(item) {
      this.$set(this.data, "shopId", "");
      this.fetchGetAllStoreByAreaId();
      this.$emit("onChangeAreaOrShop", this.data);
    },
    // 改变门店触发事件
    changeShop() {
      this.$emit("onChangeAreaOrShop", this.data);
    }
  }
};
</script>
<style>
.myButton {
  margin: 10px;
  border: none;
  background: none;
  color: #ccc;
  cursor: pointer;
  outline: none;
}
.myButton-downIcon,
.myButton-topIcon {
  display: inline-block;
  width: 12px;
  height: 8px;
  margin-left: 6px;
  background-image: url("../../../static/img/bigData4/arrow_down.png");
  transform: rotate(0deg);
  transition: transform 0.5s;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.myButton-topIcon {
  transform: rotate(180deg);
}
</style>
